<template>
    <div id="app">
        <input type="text" placeholder="姓名" v-model="username">
        <input type="text" placeholder="学号" v-model="num">
        <input type="text" placeholder="班级号" v-model="classNum">
        <button @click="search">搜索</button>
        <ul>
            <li>
                <span>姓名</span>
                <span>学号</span>
                <span>班级号</span>
                <span>教室号</span>
                <span>密码</span>
                <span>操作</span>
            </li>
            <li v-for="item in list" :key="item.id">
                <span>{{item.username}}</span>-
                <span>{{item.num}}</span>-
                <span>{{item.classNum}}</span>-
                <span>{{item.classRoom}}</span>-
                <span>{{item.password}}</span>-
                <span>
                    <button @click="del(item.id)">删除</button>
                </span>
            </li>
        </ul>
        <div>
            <span :class="['fz',{'red':pagenum===num}]" v-for="num in total" @click="change(num)">{{num}}</span>
        </div>
        <Dialog :isShow="isShow" @closeFun="close" @delRequest="delRequest"></Dialog>
    </div>
</template>

<script>
import axios from 'axios'
import Dialog from '@/components/dialog'
export default {
    data(){
        return {
            list:[],
            limit:2,     //每页的条数
            pagenum:1,   //页码
            total:0,     //总页数
            isShow:false,
            id:null,     //删除的id
            username:'',
            num:'',      //学号
            classNum:''  //班级号
        }
    },
    components:{
        Dialog
    },
    created(){
        this.getList();
    },
    methods:{
        change(num){
            //改变页码
            this.pagenum = num;
            this.getList();
        },
        getList(){
            axios.get('/api/studentlist',{params:{pagenum:this.pagenum,limit:this.limit,username:this.username,num:this.num,classNum:this.classNum}}).then(res => {
                if(res.data.code === 1){
                    this.list = res.data.data;
                    this.total = Math.ceil(res.data.total/this.limit);
                }
            })
        },
        //关闭
        close(){
            this.isShow = false;
        },
        open(){
            this.isShow = true;
        },
        //删除
        del(id){
            this.isShow = true;
            this.id = id;
        },
        //真正的删除
        delRequest(){
            axios.delete('/api/del',{params:{id:this.id}}).then(res => {
                console.log("删除",res)
                if(res.data.code === 1){
                    alert('删除成功');
                    this.isShow = false;
                    this.id = null;
                    this.getList();
                }
            })
        },
        //搜索
        search(){
            this.pagenum=1;
            this.getList();
        }
    }
}
</script>

<style lang="scss">
    .red{
        color:red;
    }

    .fz{
        font-size:30px;
    }
</style>
